import React from 'react';
import { Input,Pagination } from 'antd';
import axios from 'axios';
import styles from './tdtSearch.less';

const { Search } = Input;


export default class TdtSearch extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      pageSize:10,
      page:1
    };

  }

  handerSearch = ()=>{
    const {searchValue,pageSize,page} =this.state;
    axios.get('http://api.tianditu.gov.cn/search', {
      params: {
        postStr:{
          keyWord:searchValue,
          level:'11',
          mapBound:"106.47949,40.17048,115.77393,45.81349",
          specifyAdminCode:'156511300', //南充市
          queryType:"1",
          count:pageSize,
          start:page
        },
        type:'query',
        tk:'fea2e56773d1e30eefa38b6a6d863acf'
      }
    })
      .then((response)=> {
        let data = response.data;
        this.setState({data})
        const {getAllLocationInfo} = this.props;
        getAllLocationInfo&&getAllLocationInfo(data);
      })
      .catch((error)=> {
        console.log(error);
      });
  }

  handleLocationInfo=(item)=>{
    const {getLocationInfo} =this.props;
    getLocationInfo&&getLocationInfo(item);
    this.setState({hotPointID:item.hotPointID})
  }

  render() {
    const {data,page,pageSize,hotPointID,isSearch} =this.state;
    const {className,$map} =this.props;
    return <div className={`${className} ${styles.tdtSearch}`}>
      <Search
        placeholder="搜地点"
        allowClear
        onChange={(e)=>{
          if(!e.target.value){
            data.pois = '';
            $map&&$map.point_more_layer&&$map.point_more_layer.getSource().clear();
            this.setState({isSearch:false,data})
          }
        }}
        onSearch={searchValue => {
          searchValue&&this.setState({searchValue},()=>{
          this.setState({isSearch:true})
          this.handerSearch()
        })
      }} enterButton />
      {
        data.pois? <div className={styles.list}>
          <ul>
            {
              data.pois&&data.pois.map(item=><li key={item.hotPointID} className={hotPointID===item.hotPointID?styles.liActive:null} onClick={()=>this.handleLocationInfo(item)}>
                {item.name}
              </li>)
            }
          </ul>
          <Pagination
            simple
            current={page}
            pageSize={pageSize}
            total={data.count?Number(data.count):0}
            onChange={(page, pageSize)=>{
              this.setState({page},()=>{
                this.handerSearch()
              })
            }}
          />
        </div>:isSearch?<div>暂无内容</div>:null
      }
    </div>
  }
}
